<template>
  <view class="mask-layer" :style="maskLayerStyle" @tap="$emit('update:visible', false)" />
</template>
<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const $emit = defineEmits(["update:visible"]);

const maskLayerStyle = computed(() => {
  return {
    opacity: props.visible ? 1 : 0,
    zIndex: props.visible ? 10070 : -100
  };
});
</script>
<style lang="scss" scoped>
.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 10070;
  transition: 0.8s;
  transition-timing-function: "ease";
  background-color: var(----transparency);
}
</style>
